<template>
  <div class="container">
    <el-button type="primary" size="medium" @click="getFrontendFileTree"
      >获取前端文件目录</el-button
    >
    <el-tree
      :data="treeArrr"
      :default-expand-all="true"
      :expand-on-click-node="false"
    >
      <span
        class="custom-tree-node"
        slot-scope="{ node, data }"
        :ref="'folderCheckbox_' + node.id"
        @click="handleSelectFoldrePath(node)"
      >
        <template v-if="data.isFolder">
          <span class="folder-checkbox"></span>
          <span class="folder-name">{{ node.label }}</span>
        </template>
        <template v-else>
          <span>{{ node.label }}</span></template
        >
      </span>
    </el-tree>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import request from "@/utils/request";
@Component({})
export default class extends Vue {
  treeArrr: Array<any>;
  constructor() {
    super();
    this.treeArrr = [
      {
        id: 1,
        label: "一级 1",
        children: [
          {
            id: 4,
            label: "二级 1-1",
            children: [
              {
                id: 9,
                label: "三级 1-1-1",
              },
              {
                id: 10,
                label: "三级 1-1-2",
              },
            ],
          },
        ],
      },
      {
        id: 2,
        label: "一级 2",
        children: [
          {
            id: 5,
            label: "二级 2-1",
          },
          {
            id: 6,
            label: "二级 2-2",
          },
        ],
      },
      {
        id: 3,
        label: "一级 3",
        children: [
          {
            id: 7,
            label: "二级 3-1",
          },
          {
            id: 8,
            label: "二级 3-2",
          },
        ],
      },
    ];
  }
  getFrontendFileTree() {
    console.log("前端文件目录:");
    request({ url: "/workpace/getFileTree", method: "get" })
      .then((res) => {
        console.log("res:", res);
        this.$set(this, "treeArrr", res.data.frontendPageFileList);
      })
      .catch((err) => {
        console.log("err", err);
      });
  }
  handleSelectFoldrePath(node: any) {
    // console.log("node:", node);
    // console.log(this.$refs[`folderCheckbox_${node.id}`])
    const curElement: any = this.$refs[`folderCheckbox_${node.id}`];
    if (curElement.children[1].style.color == "rgb(64, 158, 255)") {
      curElement.children[0].style.backgroundColor = "rgb(255, 255, 255)";
      curElement.children[1].style.color = "rgb(0, 0, 0)";
      return;
    }
    curElement.children[0].style.backgroundColor = "rgb(64, 158, 255)";
    curElement.children[1].style.color = "rgb(64, 158, 255)";
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 5px;
  .custom-tree-node {
    display: flex;
    .folder-name {
      font-weight: bold;
      margin-left: 0.5rem;
    }
    .folder-checkbox {
      border: 1px solid #dcdfe6;
      border-radius: 3px;
      width: 1rem;
      height: 1rem;
      background-color: #fff;
    }
  }
}
</style>